<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body>
<script id="grid_form_temp" type="text/html">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input id="txtName" class="ui_validate" type="text" value="{{username}}"
                       ui-config="required:true,tipMessage:'请输入用户名',validType:'length[3,10]',width:400"/></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input id="txtEmail" class="ui_validate" type="text" value="{{email}}"
                       ui-config="required:true,validType:'email'"/></td>
        </tr>
        <tr>
            <td>URL:</td>
            <td><input id="txtUrl" class="ui_validate" ui-config="validType:'url'"></td>
        </tr>
        <tr>
            <td>电话:</td>
            <td><input id="txtPhone" class="ui_validate" ui-config="required:true"></td>
        </tr>
        <tr>
            <td>生日:</td>
            <td><input id="txtBirth" class="ui_validate" ui-config="required:true"></td>
        </tr>
        <tr>
            <td>下拉</td>
            <td><select id="sel" ui-config=" width:400,panelWidth:400,multiple:true">
                <option value="1">质量系统</option>
                <option value="2">生产系统</option>
                <option value="3">物资系统物资系统物资系统物资系统物资系统物资系统物资系统</option>
                <option value="4">项目系统</option>
                <option value="5">合同系统</option>
                <option value="6">质量系统</option>
                <option value="7">生产系统</option>
                <option value="8">物资系统</option>
                <option value="9">项目系统</option>
                <option value="10">合同系统</option>
                <option value="11">质量系统</option>
                <option value="12">生产系统</option>
                <option value="13">物资系统</option>
                <option value="14">项目系统</option>
                <option value="15">合同系统</option>

            </select></td>
        </tr>
        <tr>
            <td>
                <button id="btnSubmit" class="button">提交</button>
            </td>
            <td>
                <button id="btnClear" class="button">清空</button>
                <button id="btnReset" type="reset" class="button">重置</button>
            </td>
        </tr>
    </table>
</script>
<form id="form1">
</form>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../lib/template.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        var form = $('#form1').uiForm({
            template: 'grid_form_temp',
            onLoadSuccess: function () {
                $('#txtBirth').uiDate({required: true});
                $('#sel').uiCombobox();
            }
        });
        form.uiForm('load', {
            username: 'user1',
            email: 'user1@163.com'
        });
        $('#btnSubmit').bind('click', function () {
            form.uiForm('submit', {
                url: '',
                onSubmit: function () {
                    var isValid = form.uiForm('validate');
                    if (!isValid) {
                    }
                    return isValid;	// 返回false终止表单提交
                },
                success: function (data) {
                    alert(data);
                }
            });
            return false;
        });
        $('#btnClear').bind('click', function () {
            form.uiForm('clear');
            return false;
        });
        $('#btnReset').bind('click', function () {
            form.uiForm('reset');
            return false;
        });
    })
</script>
</html>
